import { Button, Form } from "antd"
import React, { useState } from 'react'
import Dailog from '../components/dailog'
import { addAction, deleteAction, updateAction, upAction, downAction } from '../redux/list_action'
import './myHome.css'
import { connect } from 'react-redux'
function MyHome(props) {
    const [visible, setVisible] = useState(false)
    const [modalRef] = Form.useForm()
    const [isUpdate, setIsupdate] = useState(0)
    const renderList = () => {
        return props.data.map((item, index) =>
            <li key={item.id}>
                <div className='left'>
                    <div>名称：&nbsp; {item.name}</div>
                    <div>年龄：&nbsp; {item.age}</div>
                    <div>地址：&nbsp; {item.address}</div>
                </div>
                <div className='right'>
                    <div>
                        {
                            index != 0 ? <Button onClick={() => up(index)}>上移</Button> : ''
                        }
                        {
                            index != props.data.length - 1 ? <Button onClick={() => down(index)}>下移</Button> : ''
                        }
                    </div>
                    <div style={{ marginTop: '6px' }}>
                        <Button onClick={() => handleupdate(item)}>更新</Button>
                        <Button onClick={() => handleDelete(item)}>删除</Button>
                    </div>
                </div>
            </li>
        )
    }
    // 上移
    const up = (index) => {
        props.up(index)
    }
    // 下移
    const down = (index) => {
        props.down(index)
    }
    // 添加 打开弹窗
    const add = () => {
        setIsupdate(0)
        setVisible(true)
    }
    // 添加 确认
    const handleAdd = (value) => {
        let id = props.data.length ? Math.max(...props.data.map(item => item.id)) + 1 : 1
        value.id = id
        props.add(value)
    }
    // 更新 打开弹窗
    const handleupdate = (item) => {
        setIsupdate(item.id)
        setVisible(true)
        modalRef.setFieldsValue(item)
    }
    // 更新 确认
    const handleUpdate = (value) => {
        value.id = isUpdate
        props.handleupdate(value)
    }
    // 关闭弹窗
    const closeModal = () => {
        modalRef.resetFields()
        setVisible(false)
    }
    // 删除
    const handleDelete = (item) => {
        props.delete(item.id)
    }
    return (
        <div>
            <Button onClick={add}>添加</Button>
            <ul>
                {renderList()}
            </ul>
            <Dailog isUpdate={isUpdate} modalRef={modalRef} visible={visible} handleAdd={handleAdd} handleUpdate={handleUpdate} closeModal={closeModal} />
        </div>
    )
}
function dispatchStateToProps(state) {
    return {
        data: state
    }
}
function mapDispatchToProps(dispatch) {
    return {
        add: data => { dispatch(addAction(data)) },
        delete: data => { dispatch(deleteAction(data)) },
        up: data => { dispatch(upAction(data)) },
        handleupdate: data => { dispatch(updateAction(data)) },
        down: data => { dispatch(downAction(data)) },
    }
}
export default connect(dispatchStateToProps, mapDispatchToProps)(MyHome)